<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input v-model="queryParams.name" placeholder="流程名称" class="filter-item search-item"/>
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      @selection-change="onSelectChange"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column label="执行实例编号" prop="executionId" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.executionId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程名称" prop="name" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前节点" prop="currentTask" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.currentTask }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否存活" prop="active" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.active }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否挂起" prop="suspended" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.suspended ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人" prop="startUserId" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.startUserId }}</span>
        </template>
      </el-table-column>


      <!--TODO 后续修改-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="toSuspendOrActiveApply(scope.row)"
          >{{ scope.row.suspended ? '激活' : '挂起' }}</el-button>
          <el-button
            size="mini"
            type="text"
            @click="toCancelApply(scope.row)"
          >{{'取消'}}</el-button>
          <el-button
            size="mini"
            type="text"
            @click="toJumpAppointProcess(scope.row)"
          >{{'跳转'}}</el-button>
          <el-button
            size="mini"
            type="text"
            @click="toHistoryList(scope.row)"
          >{{'审批历史'}}</el-button>
          <el-button
            size="mini"
            type="text"
            @click="toProcessImg(scope.row)"
          >{{'进度查看'}}</el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size"
                @pagination="search"/>
  </div>
</template>

<script>
  import {
    listProcess,
  } from '@/api/activiti/monitor'
  import {
    cancelApply,
    suspendOrActiveApply,
    jumpAppointProcess
  } from '@/api/activiti/process'
  import Pagination from '@/components/Pagination'
  export default {
    name: "processList",
    components: {Pagination},
    data() {
      return {
        tableKey: 0,
        loading: false,
        list: [],
        total: 0,
        queryParams: {},
        sort: {},
        selection: [],
        pagination: {
          size: 10,
          num: 1
        },
      }
    },
    mounted() {
      this.fetch()
    },
    methods: {
      search() {
        this.fetch({
          ...this.queryParams,
          ...this.sort
        })
      },
      reset() {
        this.queryParams = {}
        this.sort = {}
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      clearSelections() {
        this.$refs.table.clearSelection()
      },
      onSelectChange(selection) {
        this.selection = selection
      },
      sortChange(val) {
        this.sort.field = val.prop
        this.sort.order = val.order
        this.search()
      },
      fetch(params = {}) {
        this.loading = true
        params.pageSize = this.pagination.size
        params.pageNum = this.pagination.num
        listProcess(params).then(res=>{
          if(res.code==200){
            const data = res.data
            this.total = data.total
            this.list = data.rows
          }
        }).finally(()=>{
          this.loading = false
        })
      },
      toSuspendOrActiveApply(row){
       let name = row.suspended ? '激活' : '挂起'     // 1 激活 2 挂起
       let state =  row.suspended ? '2' : '1'
        this.$confirm('是否确认'+name+'ID为"'+row.processInstanceId+'"的流程实例?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{
           let data = { "instanceId": row.processInstanceId, "suspendState": state};
            suspendOrActiveApply(data).then(res=>{
                  if(res.code==200){
                    this.$message.success("操作成功")
                    this.search()
                  }
            })
        })
      },
      toCancelApply(row){
        this.$confirm('是否确认撤销ID为"'+row.processInstanceId+'"的流程实例?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{
          cancelApply({"instanceId":row.processInstanceId}).then(res=>{
              if(res.code==200){
                this.$message.success("操作成功")
                this.search()
              }
          })
        })
      },
      toJumpAppointProcess(row){
         // 打开对应实例流程节点列表 选择跳转
        console.log("等待完善")

      },
      // 进度查看
      toProcessImg(row){
        // 可以使用若依applyAfter组件内容
        console.log("等待完善")

      },
      // 审批历史
      toHistoryList(row){
        // 可以使用若依applyAfter组件内容
        console.log("等待完善")
      }
    }
  }
</script>

<style scoped>

</style>
